<template>
	<view class="page">
		<view style="background-color: #fff;">
			<u-grid :border="false" @click="click" col="3">
				<u-grid-item>
					<view class=""
						style="width: 100rpx;height: 100rpx; background-color:#e3f7ff;border-radius: 20px;text-align: center;line-height: 140rpx;">
						<image src="@/static/icon-font/pinxian.png" mode="" style="width: 70rpx;height: 70rpx;"></image>
					</view>
					<text class="grid-text">历史数据</text>
				</u-grid-item>
				<u-grid-item>
					<view class=""
						style="width: 100rpx;height: 100rpx; background-color:#f5f5ff;border-radius: 20px;text-align: center;line-height: 140rpx;">
						<image src="@/static/icon-font/shezhi.png" mode="" style="width: 70rpx;height: 70rpx;"></image>
					</view>
					<text class="grid-text">设备信息</text>
				</u-grid-item>
				<u-grid-item>
					<view class=""
						style="width: 100rpx;height: 100rpx; background-color: #defff2;border-radius: 20px;text-align: center;line-height: 140rpx;">
						<image src="@/static/icon-font/baojing.png" mode="" style="width: 70rpx;height: 70rpx;"></image>
					</view>
					<text class="grid-text">报警数据</text>
				</u-grid-item>
				<u-toast ref="uToast"></u-toast>
			</u-grid>
		</view>

		<List :conditionList="conditionList"></List>
	</view>
</template>

<script>
	import {
		BASE_URL,WS_URL
	} from '@/config/url.js'
	import indexApi from '@/api/index.js'
	import List from './compontens/list.vue'
	export default {
		onLoad(option) {
			this.currentDeviceId = option.deviceId;
			this.getList();
		},
		onShow() {

		},
		beforeDestroy() {
			this.socketTask.close(res => {})
		},
		onHide() {},
		data() {
			return {
				conditionList: [],
				currentDeviceId: '',
				socketTask: '',
			}
		},
		components: {
			List
		},
		methods: {
			getList() {
				this.socketTask = uni.connectSocket({
					url: `${WS_URL}websocket/message?deviceId=` + this.currentDeviceId,
					complete: () => {}
				});
				// this.socketTask.onOpen(res=>{
				// 	console.log('详情页，WebSocket连接已打开！');
				// });
				this.socketTask.onMessage(res => {
					this.conditionList = JSON.parse(res.data)[0];
				})
			},
			click(name) {
				if (name === 0) {
					uni.navigateTo({
						url: '/pages/historicalVideo/historicalVideo?deviceId=' + this.currentDeviceId
					})
				} else if (name === 1) {
					uni.navigateTo({
						url: '/pages/deviceMsg/deviceMsg?deviceId=' + this.currentDeviceId
					})
				} else {
					uni.navigateTo({
						url: '/pages/alarmDeviceList/alarmDeviceList?deviceId=' + this.currentDeviceId
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EFEFF4;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}
</style>